<template>

	<html2canva-pdf ref="html2pdf">
		<view class="report-time">
			<text>截止到{{reportTime}}数据报告</text>
		</view>
		<view class="content">
			<view class="report-title">
				<text>{{reportTitle}}</text>
			</view>
			<view class="report-content">
				<!-- <view :prop="option" :change:prop="echarts.updateEcharts" id="echarts" class="echarts"></view> -->
				<l-echart ref="firstEcharts"></l-echart>
				<view class="report-title">
					<text>问题指标占比情况</text>
				</view>
				<view class="">
					<uni-table ref="table" border stripe emptyText="暂无更多数据">
						<uni-tr>
							<uni-th width="100" align="center">学校名称</uni-th>
							<uni-th width="100" align="center">总指标</uni-th>
							<uni-th width="100" align="center">问题指标</uni-th>
						</uni-tr>
						<uni-tr>
							<uni-td align="center">{{ schoolIndex.xxmc }}</uni-td>
							<uni-td align="center">{{ schoolIndex.total }}</uni-td>
							<uni-td align="center">{{ schoolIndex.countImprove }}</uni-td>
						</uni-tr>
					</uni-table>
				</view>
				<view class="report-title">
					<text>问题指标罗列</text>
				</view>
			</view>
		</view>
		<!-- 导出按钮 -->
		<view class="" style="width: 80px; position: fixed; top: 0; right: 0;">
			<button type="default">导出</button>
		</view>

	</html2canva-pdf>
</template>

<script>
	import {
		getSchoolMatterComent,
		getSchoolReport
	} from "@/api/school/index.js"
	import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
	export default {
		data() {
			return {
				reportTime: "",
				reportTitle: "学校自查报告",
				schoolIndex: "",
				// 指定图表的配置项和数据
				option: {
					title: {
						text: '学校指标占比情况',
						x: 'center',
						y: 'center',
						textStyle: {
							fontWeight: 'normal',
							color: 'black',
							fontSize: '16'
						}
					},
					color: ['rgba(251, 217, 92, 1.0)'],
					legend: {
						show: true,
						itemGap: 12,
						data: ['其他指标', '不合格指标']
					},

					series: [{
						name: 'Line 1',
						type: 'pie',
						clockWise: true,
						radius: ['50%', '66%'],
						itemStyle: {
							normal: {
								label: {
									show: false
								},
								labelLine: {
									show: false
								}
							}
						},
						hoverAnimation: false,
						data: [{
							value: "",
							name: '其他指标',
							label: {
								show: true,
								position: 'outside',
								formatter: '{a|{b}：{d}%}',
								rich: {}
							},
							itemStyle: {
								normal: {
									color: { // 完成的圆环的颜色
										colorStops: [{
											offset: 0,
											color: '#7c390d' // 0% 处的颜色
										}, {
											offset: 1,
											color: '#367bec' // 100% 处的颜色
										}]
									},
									label: {
										show: false
									},
									labelLine: {
										show: false
									}
								}
							}
						}, {
							name: '不合格指标',
							value: "",
							label: {
								show: true,
								position: 'outside',
								formatter: '{a|{b}：{d}%}',
								rich: {}
							},
						}]
					}]
				}
			}
		},
		computed: {
			schoolId() {
				return this.$store.state.user.schoolId
			}
		},
		methods: {
			getReportTime() {
				let date = new Date()
				let year = date.getFullYear() //获取完整的年份(4位)
				let month = date.getMonth() + 1 //获取当前月份(0-11,0代表1月)
				let strDate = date.getDate() // 获取当前日(1-31)
				if (month < 10) month = `0${month}` // 如果月份是个位数，在前面补0
				if (strDate < 10) strDate = `0${strDate}` // 如果日是个位数，在前面补0
				return year + "年" + month + "月" + strDate + "日"
			},

			schoolReport(schoolId, activityId) {
				getSchoolReport(schoolId, activityId).then(res => {

					if (res.status == 0) {
						this.schoolIndex = res
						this.option.series[0].data[0].value = (this.schoolIndex.total - this.schoolIndex
								.countImprove) /
							this.schoolIndex.total
						this.option.series[0].data[1].value = this.schoolIndex.countImprove / this.schoolIndex
							.total

						this.inintFirstEcharts(this.option)
					}
				})
			},
			schoolMatterComent(schoolId, activityId) {
				getSchoolMatterComent(schoolId, activityId).then(res => {
					if (res.status == 0) {
						console.log(res)

					}
				})
			},
			onViewClick(options) {
				console.log(options)
			},
			inintFirstEcharts(option) {
				this.$refs.firstEcharts.clear();
				this.$refs.firstEcharts.showLoading();
				this.$refs.firstEcharts.init(echarts, chart => {
					chart.setOption(option);
					chart.hideLoading();
				});
			},
		},
		onLoad: function(option) {
			this.reportTime = this.getReportTime()
			this.schoolReport(this.schoolId, option.id)
			this.schoolMatterComent(this.schoolId, option.id)
		}
	}
</script>

<style lang="scss" scoped>
	.report-time {
		height: 5vh;
		line-height: 5vh;
		padding: 0 10px;
	}

	.report-title {
		font-size: 20px;
		text-align: center;
		width: 100vw;
	}

	.echarts {
		margin-top: 20px;
		width: 100vw;
		height: 300px;
	}

	/deep/ .uni-table {
		width: 100vw;
	}
</style>